<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('功能树')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: bootstrap-treeview-css" />
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
    <link th:href="@{/css/detail.css}" rel="stylesheet"/>
    <link th:href="@{/css/page_epiboly.css}" rel="stylesheet"/>
</head>
<body class="white-bg function">
<input type = "hidden" name = "id">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box box-main">
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
                <input type = "hidden" name = "categoryCode">
            </div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div" id="wrapper">
        <!-- Sidebar -->
        <div id="page-content-wrapper">
            <div class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                <img class="toggle-img" th:src="@{/img/toggle.png}" />
            </div>
            <div class="container">
                <div class="pull-left" id = "usageListDiv"></div>
                <div class="pull-right container-detail" id="usageDetailsDiv"></div>
            </div>
        </div>
        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top sidebar-wrapper" id="sidebar-wrapper" role="navigation">
            <div class="pull-right function-image-list" id = "bffImgListDiv"></div>
        </nav>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />

<script id="usageListTpl" type="text/template">
   <!--<ul>-->
        <!--{{# layui.each(d, function(index, a){ }}-->
        <!--<li data-index = "{{index}}"  data-type="3">-->
            <!--<div>-->
                <!--<p title="{{a.usageyName}}"><span>{{index + 1}}</span>{{a.usageyName}}</p>-->
                <!--<p><span>{{a.createBy}}</span><span style = "margin-left:10px;">{{# if(a.status == 0){ }}未完成{{# } else if(a.status == 1){ }}进行中{{# } else { }}已完成{{# }}}</span></p>-->
            <!--</div>-->
        <!--</li>-->
        <!--{{# }); }}-->
    <!--</ul>-->
   <ul class="container-ul">
        <!--<li class="active"><div>1 场景列表</div></li>
        <li><div>2 场景列表0</div></li>-->
        {{# layui.each(d, function(index, a){ }}
            <li data-id = "{{a.id}}"><div>{{a.usageyName}}</div></li>
        {{# }); }}
   </ul>
</script>

<script id="usageDetailsTpl" type="text/template">
    <div class="usage-detail">
        <div class="list-tit">
            <p>
                <span>{{# if(d.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
                <span>{{# if(d.usageType=='1') { }} 增 {{# } else if(d.usageType == '2') { }} 删 {{# } else if(d.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
                <span>{{d.usageyName || '一'}}</span>
                <a class="pull-right usageDetailsCls" style = "cursor: pointer;" usageId = "{{d.id}}">查看用况详情</a>
            </p>
            <p>
                <span style="">用况架构</span>
                <span>
                {{# if(d.clientType=='1') { }} PCweb {{# } else if(d.clientType == '2') { }} H5 {{# } else if(d.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
                · {{# if(d.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
                · {{# if(d.versionType=='1') { }} 新功能 {{# } else if(d.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
                </span>
            </p>
        </div>
        <div class="list-content">
            <p>用况故事</p>
            <p>{{d.usageStory || '一'}}</p>
        </div>
        <div class="list-content">
            <p>价值描述</p>
            <p>{{d.valueDescription || '一'}}</p>
        </div>
        <div class="list-content">
            <p>业务实现逻辑</p>
            <p>{{d.businessImplDescription || '一'}}</p>
        </div>
        <div class="list-content">
            <p>优化或废弃说明</p>
            <p>{{d.versionDescription || '一'}}</p>
        </div>
    </div>
</script>

<script id = "bffImgListTpl" type = "text/template">
    <ul>
        {{# layui.each(d, function(index, a){ }}
            <li class="text-center">
                <img src="{{a.filePath}}" class="partPage" th:onerror="this.src='/img/page.png'"/>
                <div class="mt15">{{a.fileName}}</div>
                <div class="line"></div>
            </li>
        {{# }); }}
    </ul>
</script>
<script th:inline="javascript">
    var prefix = ctx + "usage/usage/new";
    $(function() {
        $('body').layout({
            initClosed: false,
            west__size: 200
        });
        $('[data-toggle="offcanvas"]').click(function() {
            if($('#wrapper').attr("class").indexOf("toggled")==-1){
                bffImgList();
            }
            $('#wrapper').toggleClass('toggled');
        });
        $("body").on('click','.container-ul li',function(){
            $(".container-ul li").removeClass("active")
            $(this).addClass("active");
            $("input[name='id']").val($(this).data("id"));
            usageDetails($(this).data("id"));
        }).on('click', ".usageDetailsCls", function () {
            var usageId = $(this).attr("usageId");
            $.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + usageId);
        }).on('click', ".partPage", function(e) {
            var url = $(this).attr("src");
            var json = {
                "title": "预览",
                "start": 0,
                "data": [{
                    "src": url,
                }]
            };
            layer.photos({
                photos: json,
                closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        })
        $(".tab-content li").click(function() {
            $("#wrapper").removeClass("toggled").addClass("all-toggled")
        });
        // 加载分类树
        queryCategoryTree();
        // 加载
        usageList();
    });

    /**
     * 分类树
     */
    function queryCategoryTree() {
        var url = ctx + "category/category/treeData2?type=3";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);
        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();

            $("input[name='categoryCode']").val(treeNode.code);
            usageList();
        }
    }

    /**
     * 用况列表
     * @param params
     */
    function usageList() {
        let params = {};
        params.categoryCode = $("input[name='categoryCode']").val();
        let config = {
            url: prefix + "/list",
            type: "post",
            dataType: "json",
            data: params,
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    let data = result.data || [];
                    var usageListTplHtml = $("#usageListTpl").html();
                    laytpl(usageListTplHtml).render(data, function (html) {
                        $("#usageListDiv").empty();
                        $("#usageListDiv").append(html);
                    });
                    $('.container-ul li:eq(0)').click()
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }

    /**
     * 用况详情
     * @param id
     */
    function usageDetails(id) {
        let config = {
            url: prefix + "/detail/" + id,
            type: "post",
            dataType: "json",
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    let data = result.data || {};
                    var usageDetailsTplHtml = $("#usageDetailsTpl").html();
                    laytpl(usageDetailsTplHtml).render(data, function (html) {
                        $("#usageDetailsDiv").empty();
                        $("#usageDetailsDiv").append(html);
                    });
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                    return false;
                }
                $.modal.alertError(result.msg);
            }
        };
        $.ajax(config);
    }

    /**
     * bff接口局部图
     * @param pageData
     */
    function bffImgList() {
        var resultJson;
        var config = {
            url: prefix + "/bffImgList",
            type: "POST",
            dataType: "json",
            async: false,
            data: {"usageId":$("input[name='id']").val()},
            success: function (result) {
                if (result && result.code == 0) {
                    resultJson = result.data;
                }
            }
        };
        $.ajax(config);
        var bffImgListTplHtml = $("#bffImgListTpl").html();
        laytpl(bffImgListTplHtml).render(resultJson, function (html) {
            $("#bffImgListDiv").empty();
            $("#bffImgListDiv").append(html);
        });
    }
</script>
</body>
</html>
